<template>
  <div class="info">
    <div class="title">
      <div class="lt">
        {{camera.device.deviceName}}
      </div>
      <div class="rt">
        <addCamera size="mini" type="primary" :info="camera" :edit="true" @refresh="refresh">编辑</addCamera>
        <addCamera class="mg-l" size="mini" type="primary">新增</addCamera>
        <changeCamera class="mg-l" size="mini" type="primary" @change="bindChange">切换</changeCamera>

      </div>
    </div>
    <el-form label-width="90px" size="mini">
      <el-row :gutter="5" class="content">
        <el-col :span="12">
          <el-form-item label="摄像头编号：">{{camera.device.number}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="摄像头状态：">{{camera.device.state}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0" class="content">
        <!-- <el-col :span="12">
          <el-form-item label="所属录像机：">{{camera.nvr.nvrName}}
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="摄像头位置：">{{camera.device.point.lon+','+camera.device.point.lat}}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import changeCamera from "./dialog/changeCamera";
  import addCamera from "./dialog/addCamera";
  import { listCamera } from "@/api/page/monitoring.js";
  import send from "./sendMsg";

  export default {
    name: "info",
    components: {
      changeCamera,
      addCamera
    },
    props: {},
    data() {
      return {
        camera: {
          device: {
            deviceName: "",
            number: "",
            status: "",
            point: {
              lon: "",
              lat: ""
            }
          },
          nvr: {
            nvrName: ""
          }
        },
        localCamera: undefined,
        queryParams: {
          cameraId: undefined,
          device: {
            deviceId: undefined,
            deviceName: undefined,
          }
        }
      };
    },
    watch: {

    },
    computed: {},
    methods: {
      bindChange(e) {
        for (var i = 0; i < this.$parent.$parent.cameraList.length; i++) {
          var camera = this.$parent.$parent.cameraList[i];
          if (camera.cameraId == e) {
            this.$parent.$parent.selectedCamera = camera;
            this.localCamera = camera;
            this.initCameraInfo();
            this.$parent.$parent.initEZUIKit();
            this.msgSuccess("切换成功");
          }
        }
      },
      refresh() {
        console.log("编辑成功刷新数据");
      },
      initCameraList() {
        let self = this;
        self.loading = true;
        listCamera(this.queryParams)
          .then(response => {
            console.log(response.rows);
            let result = response.rows;
            self.$parent.$parent.cameraList = result;
            send.$emit("cameraList", result);
            if (self.$parent.$parent.id) {
              for (var i = 0; i < response.rows.length; i++) {
                if (self.$parent.$parent.id == response.rows[i].cameraId) {
                  self.$parent.$parent.selectedCamera = response.rows[i];
                }
              }
            } else {
              self.$parent.$parent.selectedCamera = response.rows[0];
            }
            if (this.localCamera != undefined) {
              this.$parent.$parent.selectedCamera = this.localCamera;
            }
            self.$parent.$parent.initEZUIKit();
            self.initCameraInfo();
          })
          .catch(err => {
            self.loading = false;
          });
      },
      initCameraInfo() {
        this.camera = this.$parent.$parent.selectedCamera;
        this.getDicts("sensor_state").then(response => {
          for (var i = 0; i < response.data.length; i++) {
            var obj = response.data[i];
            if (obj.dictValue == this.camera.device.state) {
              this.camera.device.state = obj.dictLabel;
            }
          }
        });
      }
    },
    created() {
      this.initCameraList();
    }
  };
</script>
<style lang="scss" scoped>
  @import "~@/assets/styles/mixin.scss";
  @import "~@/assets/styles/variables.scss";

  .info {
    padding: 8px;
    background-color: #fff;
    @include shrink;
    margin-bottom: 8px;

    .title {
      margin: 0;
      @include flex(space-between, center);
      padding: 9px 0;
      border-bottom: 2px solid #e4e7ed;
      position: relative;

      &:after {
        display: block;
        content: "";
        position: absolute;
        width: 65px;
        height: 2px;
        background: #1890ff;
        left: 0;
        bottom: -2px;
      }

      color: #1890ff;

      .rt {
        @include flex;
      }
    }

    /deep/.el-form-item {
      margin-bottom: 0;
    }

    /deep/.el-form-item__label {
      color: #a8a8a8;
      font-weight: normal;
      font-size: 12px;
    }

    /deep/.el-form-item__content {
      color: #323232;
      font-size: 12px;
      word-wrap: break-word;
    }
  }
</style>
